// 创建路由器，并暴露它
// 第一步：引入createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 引入一个个可能要呈现的组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Detail from '@/pages/Detail.vue'
// 第二步：创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            name: 'shouye',
            path: '/home',
            component:Home
        },
        {
            name: 'xinwen',
            path: '/news',
            component: News,
            children: [
                {
                    name:'xiangxi',
                    path: 'detail/:id/:title/:content?', //加“？”表示可传可不传
                    component: Detail,

                    // 第一种写法：将收到的所有params参数作为props参数传给路由组件
                    // props:true

                    // 第二种写法：函数写法，可以自己决定什么作为props参数传给路由组件
                    props(route) {
                        return route.query
                    }

                    // 第三种写法：对象写法
                    // props: {
                    //     a:100,
                    //     b:100,
                    //     c:100,
                    // }
                }
            ]
        },
        {
            name: 'guanyu',
            path: '/about',
            component:About
        },
    ]
})

// 暴露出去router
export default router